import React, { useEffect, useState } from 'react'
import ProForm from '@ant-design/pro-form'
import Editor from '@/components/Editor'
import { editWebConfig, getWebConfigDetail } from '@/services/webconfig'
import ProSkeleton from '@ant-design/pro-skeleton'
import { message } from 'antd'

const TechnicalHelp = () => {
  // 把获取到的数据存到状态
  const [configer, setConfiger] = useState(null)
  //定义Form实例 用来操作表单
  const [formObj] = ProForm.useForm()

  useEffect(async () => {
    //获取网站配置详情
    const configer = await getWebConfigDetail('technical_help').then(res => {
      return setConfiger(res.value)
    })

  }, [])

  /**
   * 修改网站配置
   * @param values 表单中输入的数据
   * @returns {Promise<void>}
   */
  const updataWebConfig = async values => {
    /**
     * 定义要修改的字段
     * @type {{cn_name: string, value: {content}}}
     */
    const data = {
      'cn_name': '技术帮助',
      'value': {
        'content': values.content
      }

    }
    /**
     *  执行修改
     * @type {*}
     */
    const response = await editWebConfig('technical_help', data)
    if (response.status === undefined) {
      message.success('修改成功')
    }
  }

  /**
   * 文件上传成功后设置文件上传的value
   * @param fileKey
   * @returns {*}
   */
  const setDetails = content => {
    formObj.setFieldsValue({ 'content': content })
  }

  return (
    <div>
      {
        configer == null ?
          <div
            style={{
              background: '#fafafa',
              padding: 24,
            }}
          >
            <ProSkeleton type="list"/>
          </div> :
          <ProForm
            form={formObj}
            onFinish={values => updataWebConfig(values)}
            initialValues={configer}
            submitter={{
              // 配置按钮的属性
              resetButtonProps: {
                style: {
                  // 隐藏重置按钮
                  display: 'none',
                },
              },
            }
            }
          >
            <ProForm.Item
              name="content"
              label="技术帮助内容"
              rules={[{ required: true, message: '请输入技术帮助内容' }]}
            >
              <div>
                <Editor setDetails={setDetails} content={configer.content}/>
              </div>
            </ProForm.Item>
          </ProForm>
      }

    </div>
  )
}

export default TechnicalHelp

